<template>
  <view class="search">
    <!-- 搜索组件 -->
    <u-search
      placeholder="输入商品名"
      v-model="keyword"
      :action-style="{
        backgroundColor: '#ea4350',
        color: '#fff',
        height: '64rpx',
        lineHeight: '64rpx',
        borderRadius: '15rpx',
      }"
      @custom="handleSearch"
      @change="handleInputChange"
    ></u-search>
    <!-- 商品列表 -->
    <view class="search-list u-m-t-10">
      <navigator
        v-for="item in goodsKeyWord"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_name}`"
      >
        {{ item.goods_name }}
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      goods: [],
      goodsKeyWord: [], // 商品关键字列表
    };
  },
  methods: {
    // 处理点击搜索事件
    handleSearch() {
      // console.log(this.keyword);
      // 根据关键字来搜索商品
      this.getGoodsList(this.keyword);
    },
    // 搜索框值改变触发事件
    handleInputChange() {
      this.$u.debounce(() => {
        this.goodsQsearch(this.keyword);
      }, 500);
    },

    // 根据关键字来搜索商品
    // 这个接口是用来实现  第二种 搜索中心业务
    async goodsQsearch(query) {
      const result = await this.$u.get("/goods/qsearch", { query });
      // console.log(result);
      this.goodsKeyWord = result.message;
    },

    // 根据关键字来搜索商品
    // 这个接口是用来实现  第一种 搜索中心业务
    async getGoodsList(query) {
      const params = {
        query: query,
        cid: "",
        pagenum: 1,
        pagesize: 20,
      };
      const result = await this.$u.get("/goods/search", params);
      this.goods = result.message.goods;
    },
  },
};
</script>

<style lang="scss">
.search {
  padding: 15rpx;
}
.search-list {
  navigator {
    font-size: 28rpx;
    padding: 20rpx;
  }
}
</style>